<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Spittles</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}"/>
</head>
<body>
<div id="header" th:include="page :: header"></div>

<div id="content">
    <div class="spittleForm">
        <h1>Spit it out ...</h1>
        <form name="spittleForm" method="post">
            <input type="hidden" name="latitude"/>
            <input type="hidden" name="longitude"/>
            <textarea name="message" cols="80" rows="5"></textarea>
            <br/>
            <input type="hidden" th:name="${_csrf.getParameterName()}" th:value="${_csrf.token}"/>

            <input type="submit" value="ADD"/>
        </form>
    </div>

    <div class="listTitle">
        <h1>Recent Spittle...</h1>
        <ul class="spittleList">
            <li th:each="spittle : ${spittleList}" th:id="'spittle'+${spittle.id}">
                <div class="spittleMessage" th:text="${spittle.message}">Spittle Message</div>
                <div>
                    <span class="spittleTime" th:text="${spittle.createdAt}">spittle createdAt</span>
                    <span class="spittleLocation" th:text="'('+${spittle.latitude} + ',' + ${spittle.longitude} + ')'">lat,long</span>
                </div>
            </li>
        </ul>

    </div>
</div>

<div id="footer" th:include="page :: copy"></div>

</body>
</html>